<template>
  <view class="box">
    <view class="user" :style="{background:userInfo?'':'#fd2d48'}">
      <image v-if="userInfo" :src="userUrl" class="bg" mode="aspectFill" />
      <view class="login">
        <button v-if="!userInfo" open-type="getUserInfo" @getuserinfo="login" plain>登录</button>
        <image v-if="userInfo" :src="userUrl" />
        <view v-if="userInfo" class="username">
          <view class="myname">
            {{nickName}}
            <image :src="gender==1?'../../static/gender1.png':'../../static/gender0.png'" class="icon" ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="content">
      <!-- 商品相关 -->
      <view class="product_information">
        <view class="item">
          <text>0</text>
          <view>收藏的店铺</view>
        </view>
        <view class="item">
          <text>{{likeLength}}</text>
          <view>收藏的商品</view>
        </view>
        <view class="item">
          <text>0</text>
          <view>关注的商品</view>
        </view>
        <view class="item">
          <text>0</text>
          <view>我的足迹</view>
        </view>
      </view>
      <!-- 订单相关 -->
      <view class="order">
        <view class="order_top">我的订单</view>
        <view class="order_content">
          <view class="item">
            <view class="iconfont icon-dingdan"></view>
            <view>全部订单</view>
          </view>
          <view class="item">
            <view class="iconfont icon-daifukuan"></view>
            <view>待付款</view>
          </view>
          <view class="item">
            <view class="iconfont icon-daishouhuo"></view>
            <view>待收货</view>
          </view>
          <view class="item">
            <view class="iconfont icon-tuikuan"></view>
            <view>退款/退货</view>
          </view>
        </view>
      </view>
      <!-- 收货地址 -->
      <view class="address">
        <view>收货地址管理</view>
      </view>
      <!-- 服务介绍 -->
      <view class="serve">
        <view class="item">
          <view>联系客服</view>
          <view>400-618-400</view>
        </view>
        <view class="item">
          <view>意见反馈</view>
        </view>
        <view class="item">
          <view>关于我们</view>
        </view>
      </view>
      <!-- 分享 -->
      <view class="share">
        <view>把应用推荐给其他人</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userUrl: '',
      nickName: '',
      userInfo: '',
      gender: 0,
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || ''
    if (this.userInfo) {
      this.userUrl = this.userInfo.avatarUrl
      this.nickName = this.userInfo.nickName
      this.gender = this.userInfo.gender
    }
  },
  methods: {
    login(e) {
      console.log(e.detail.userInfo)
      uni.setStorageSync('userInfo', e.detail.userInfo)
      this.userInfo = e.detail.userInfo
      this.userUrl = this.userInfo.avatarUrl
      this.nickName = this.userInfo.nickName
      this.gender = this.userInfo.gender
    },
	},
	computed: {
		likeLength(){
			return 	uni.getStorageSync('goodsList').length || 0
		}
	},
}
</script>

<style lang="scss">
.user {
  height: 80vw;
  // background: $theme-color;
  position: relative;

  .bg {
    filter: blur(4px);
    height: 100%;
    position: absolute;
    top: 0;
    // bottom: 0;
    left: 0;
    z-index: -1;
  }
  .login {
    padding: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    // overflow: hidden;
    .username {
      position: absolute;
      bottom: -70rpx;
      // display: flex;
      .myname {
        position: relative;
        color: $theme-color;
        font-weight: 600;
        .icon {
          position: absolute;
          right: -50rpx;
          top: 0;
          // background: #000;
          width: 40rpx;
					height: 40rpx;
					
					// background-size: cover;
        }
      }
    }
    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
    }
  }
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    height: 150rpx;
    background: $theme-color;
    border-radius: 50%;
    color: #fff;
    border-color: transparent;
  }
}
.content {
  background: #fafafa;
  padding: 0 40rpx;
  padding-bottom: 60rpx;
  .product_information {
    display: flex;
    justify-content: space-around;
    background: #fff;
    transform: translateY(-40rpx);
    border-radius: 20rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0;
      text {
        color: $theme-color;
      }
    }
  }
  .order {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20rpx;
    .order_top {
      height: 80rpx;
      border-bottom: 1px solid #ecebe7;
      line-height: 80rpx;
      padding: 0 20rpx;
    }
    .order_content {
      flex: 1;
      display: flex;
      justify-content: space-around;

      .item {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 25rpx 0;
        .iconfont {
          color: $theme-color;
          font-size: 40rpx;
        }
      }
    }
  }
  .address {
    background: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 40rpx 0;
  }
  .serve {
    background: #fff;
    border-radius: 20rpx;
    // margin-bottom:40rpx;
    .item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      border-top: 1px solid #ecebe7;
      &:first-child {
        border: none;
      }
    }
  }
  .share {
    border-radius: 20rpx;
    background: #fff;
    padding: 20rpx;
    margin-top: 40rpx;
  }
}
</style>
